<template>
	<view class="cart-show-index" :style="[{paddingTop:statusBar+ 'px'}]">
			
			<lff-barrage ref="lffBarrage"></lff-barrage>
			<view class="boxRecord"  @click="back()" >
				<view>拆箱记录</view>
				<image src="/static/images/right-black-icon.png" class="rightmore" mode=""></image>
			</view>
			 <view class="box-content">
				<image :src="boxDetail.image" mode="" class= "box-top-image"></image>
				<view class="box-content-desc">
					<view class="box-desc-card">
						<view class="box-desc-card-ques">?</view>
						<view class="box-decs-card-js">
							<view class="box-desc-title">{{boxDetail.name}}</view>
							<view class="box-desc-js">开箱100%必出以下宝贝之一</view>
						</view>
					</view>
					<view class="box-content-ccl">
						<view class="box-content-ccl-img-item">
							
							<image src="/static/images/box-ccl.png"  mode="" class="box-content-ccl-img"></image>
						</view>
						
						<view class="ccl-list">
							<block v-for="(level, index) in boxLevels" :key="index">
								<view class="ccl-desc">
									<image :src="level.icon"  mode="" class="rate-img"></image>
									<view  class="rate-item" >{{ level.name }}</view>
									<view  class="rate-btn" >{{ level.rate }}%</view>
								</view>
								
							</block>
						</view>
						
					</view>
				</view>
				<view class="box-list">
					<block v-for="(product, index) in products" :key="index" >
						<view class="box-list-item">
							<image :src="product.product.cover_url"  mode="" class="product-img"></image>
							<view class="product-desc">
								<view class="product-title">{{product.product.title}}</view>
								<view class="product-price-item">
									<view class="product-price-sologn">热 CLUB</view>
									<view class="product-price">¥{{product.product.price_market}}</view>
								</view>
								<view class="product-rate-desc">
									<view class="product-rate-cycle"></view>
									<view class="product-rate-line"></view>
									<view class="product-rate-item">产出率{{product.rate}}%</view>
								</view>
								
							</view>
							<view class="product-desc-right">
								<image :src="product.image"  mode="" class="right-image"></image>
								<text class="level-name">{{product.level_name}}</text>
								<image src="/static/images/right-icon.png"  mode="" class="right-icon"></image>
							</view>
							
						</view>
					</block>
				</view>
			</view> 
			<view class="submit" @click="openBuyPanel">
				券后¥{{ realPrice }}元开启盲箱
			</view>
			
			<uni-popup ref="buypopup" type="bottom" :is-mask-click="false" >
				<view class="buy-content">
					<view class="content">
						<view class="buy-top">
							<text>每个盲箱对应一件商品，</text>
							<text>100%不空箱</text>
							<image src="/static/images/cancle.png" class="rightmore" mode="" @click="close()"></image>
						</view>
						<view class="buy-box-desc">
							<image :src="boxDetail.image"  mode="" class="buy-box-img"></image>
							<view class="buy-box-item">
									<view class="buy-box-title">{{boxDetail.name}}</view>
									<view class="buy-box-price">¥{{boxDetail.price}}</view>
									
							</view>
						</view>
						
						<view class="buy_address"> 
							<order-address-entrance-com></order-address-entrance-com>
							
						</view>
						<view class="buy_patment">
							 <payment-choose-com :user="user" @paymentChosen="choosePayment" :currentIndex="currentIndex"  ></payment-choose-com>
						</view>
						<view class="buy-coupon">
							<order-coupon-com  :user="user"  :isTake="isTake" :orderSource="orderSource" :totalAmount="boxDetail.price" @choiceCoupon="choiceCoupon"></order-coupon-com>
						</view>
						<view class="buy-xz">
							<view class="buy-xz-title">我已阅读<text>《用户须知》</text>和<text>《商品发货须知》</text></view>
							<image src="/static/images/desc-icon.png" mode="" v-if='isAgree' @click="handleClick" class='buy-xz-image'></image>
							<image src="/static/images/desc-icon-selected.png" mode="" v-else  @click="handleClick" class='buy-xz-image'></image>
						</view>
						
						<view class="buy-submit">
							<view class= "total">合计：￥{{ realPrice }}</view>
							<view class="button" plain="true" @click="submitOrder">立即购买</view>
						</view>
					</view>
				</view>
			</uni-popup>
	</view>
</template>

<script>
import store from 'store'
import { mapGetters, mapActions } from 'vuex'
import CurrentUser from "mixins/CurrentUser";
import { getBoxLevels,getBoxDetail,getBoxProducts,createBoxOrder,getBoxTakeOrders} from "api/boxApi.js";
import OrderAddressEntranceCom from "components/order/confirm/OrderAddressEntranceCom";
import PaymentChooseCom from "components/common/PaymentChooseCom"
import OrderCouponCom from "components/order/confirm/OrderCouponCom"
import { balancepay,wxpaym,spendpay,goldCoinPay } from "helpers/paymentHelper"
import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
export default { 
  name: "box",
  store,
  data() {
	return {
	  bid:'',
	  boxLevels:[],
	  boxDetail : [],
	  products :[],
	  isAgree:true,
	  currentIndex:0,
	  boxId:0 ,
	  orderSource:'box',
	  isTake:false,
	  dPrice:0,
	  uCouponId:0,
	  realPrice:0,
	  page:1,
	  
	}
  },
  mixins: [
  	// AuthChecking,
  	CurrentUser
  ],
  components: {
  	OrderAddressEntranceCom,
	PaymentChooseCom,
	OrderCouponCom,
	lffBarrage,
  },
  computed: {
	...mapGetters([
			'statusBar',
			'isLogin',
			'currentAddress',
			'orderPayment'
	])
  },
  methods: {
	  ...mapActions([
	  	'updateOrderPayment'
	  ]),
	  handleClick() {
	  	this.isAgree = !this.isAgree
	  },
	  async loadBoxPorducts() {
	    const response = await getBoxProducts(this.bid) 
	    const products = response.data;
	    this.products = products
	  },
	  async loadBoxDetail() {
	    const response = await getBoxDetail(this.bid) 
	    const boxDetail = response;
	    this.boxDetail = boxDetail
		this.realPrice = boxDetail.price;
		
	  },
	  close(){
	  	this.$refs.buypopup.close('bottom')
	  	
	  },
	  choiceCoupon(params) { //选项卡切换
	  	this.dPrice = params.decrementPrice
	  	this.uCouponId = params.userCouponId
	  	this.realPrice = this.boxDetail.price - this.dPrice;
	  	console.log(this.uCouponId);
	  },
	  async loadBoxLevels() {
	    const response = await getBoxLevels(this.bid) 
	    const boxLevels = response;
	  		
	    this.boxLevels = boxLevels;
	  },
	  async loadBoxTakenOrders() {
	    const response = await getBoxTakeOrders(this.bid,{page: this.page}) 
	    const orders = response.data;
		
		if(orders){
			let self=this;
			 setInterval(function() {
					orders.forEach((order, index) => {
						self.$refs.lffBarrage.add({pic:order.user.avatar_url,item:'恭喜'+order.user.name+'抽到'+order.product_name});
					}) 
			}, 4000);
			/* setInterval(function() {
				
			 	orders.forEach((order, index) => {
					this.$refs.lffBarrage.add({pic:order.user.avatar_url,item:'恭喜'+order.user.name+'抽到'+order.product_name});
				}) 
			}, 1000) */
			
			
			
		}
	  
	  },
	 
	  
	  async openBuyPanel() {
	  	if(this.source == 'wap'){
	  		if (await this.isLogin) {
	  			// uni.navigateTo({url: '/packs/pages/download/download'})
	  			
	  			// 创建订单底部弹框
	  			this.$refs.buypopup.open('bottom')
	  			
	  		}
	  	}else{
	  		this.$refs.buypopup.open('bottom')
	  	}
	  },
	  async choosePayment(payment,index) {
	  	this.currentIndex = index
	  	await this.updateOrderPayment(payment)
	  },
	  async payCurrentOrder() {
	  	
	  	if (this.orderPayment === 'balance') {
	  		await balancepay(this.boxId, 'box')
	  		uni.setStorage({
	  			key: 'payid',
	  			data: this.boxId
	  		});
	  	}
	  	
	  	
	  	if (this.orderPayment === 'weixin') {
	  		const payload = await payOrderByAdapayWxmini(this.order.id)
	  		let jumpPayUrl = ''
	  		if(this.isWeiXinLogin){
	  			jumpPayUrl = payload.result.wx_h5_pay_url;
	  		}else{
	  			jumpPayUrl = payload.result.scheme_code;
	  		}
	  		window.location.href = jumpPayUrl;
	  	}
	  	
	  },
	  async submitOrder() {
	  	if (!this.currentAddress) {
	  		uni.showToast({
	  			title: '请选择收货地址'
	  		})
	  		return
	  	}
		if (await this.isLogin) {
			if (!this.isAgree) {
				
				let params = {
					blind_box_id:this.boxDetail.id,
					address_id:this.currentAddress.id,
					user_coupon_id:this.uCouponId,
				}
				const response = await createBoxOrder(params);
				if(!response.msg){
					this.boxId = response.id;
					await this.payCurrentOrder()
					this.$refs.buypopup.close()
					this.iscurrent = true 
				}else{
					uni.showModal({
						title: '提示',
						content: '服务器错误',
						showCancel: false
					})
				}
				
			
			} else {
				uni.showToast({
					title: '请勾选协议',
					mask: true,
					icon: 'none',
					position: 'bottom',
					duration: 2000
				});
			}
		} else {
			uni.redirectTo({
				url: '/packs/pages/auth/auth'
			})
		}
	  
	  },
	  async onshow(){
		  await this.getCurrentUser();
		  
		  
	  },
	  onLoad(options){
		if(options.box_id){
			this.bid = options.box_id;
			 this.loadBoxLevels();
			 this.loadBoxDetail();
			 this.loadBoxPorducts();
			 this.loadBoxTakenOrders()
			  
			 /* setInterval(() => {
			 	this.loadBoxTakenOrders()
			 },6000) */
			/* setInterval(function() {
						  console.log(123);
				
			}, 1000) */
			 //this.loadBoxTakenOrders();
		}
		  
	  },
	 
	  
	  
  }
 } 
</script>

<style lang="scss" scoped>

.status {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	background: #F6F6F6;
}
.navigation{
	width: 100%;
	height: 100rpx;
	background: #F6F6F6;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left:0;
	top:0;
	z-index:999;
}
.navigation-position{
	width: 100%;
	height: 100rpx;
	background: rgba(0,0,0,0);
}
.back{
	display: block;
	width: 48rpx;
	height: 48rpx;
	position: absolute;
	top: 26rpx;
	left:32rpx;
}
.navigation-title{
	font-size: 32rpx;
	font-weight: 500;
	color: #333333;
}
.box-content{
	text-align: center;
	.box-top-image{
		width:480rpx;
		height:410rpx;
		margin:18rpx auto 100rpx;
		z-index:0;
	}
	.box-content-desc{
		width:100%;
		background:#999;
		overflow: hidden;
		.box-desc-card{
			width:718rpx;
			height:186rpx;
			margin:16rpx;
			background:#333;
			color:#fff;
			border-radius:10rpx;
			overflow: hidden;
			.box-desc-card-ques{
				width:164rpx;
				height:152rpx;
				background:#D84C29;
				color:#fff;
				font-size:128rpx;
				line-height:152rpx;
				text-align: center;
				border-radius:10rpx;
				margin-left:12rpx;
				margin-top:18rpx;
				float:left;
				
			}
			.box-decs-card-js{
				color:#fff;
				margin-left:22rpx;
				float:left;
				text-align: left;
				.box-desc-title{
					font-size:32rpx;
					margin-top:40rpx;
				}
				.box-desc-js{
					font-size:30rpx;
					margin-top:18rpx;
				}
			}
			
		}
		.box-content-ccl{
			width:100%;
			overflow: hidden;
			.box-content-ccl-img-item{
				height:172rpx;
				float:left;
				.box-content-ccl-img{
					width:138rpx;
					height:88rpx;
					margin-top:36rpx;
					margin-left:20rpx;
				}
			}
			
			.ccl-list{
				height:172rpx;
				float:left;
				width:570rpx;
				.ccl-desc{
					width:108rpx;
					height:128rpx;
					float:left;
					position:relative;
					margin-left:32rpx;
					margin-top:16rpx;
					.rate-img{
						width:108rpx;
						height:128rpx;
					}
					.rate-item{
						position:absolute;
						top:32rpx;
						color:#fff;
						left:28rpx;
						font-size:24rpx;
						font-weight:600;
					}
					.rate-btn{
						width:100rpx;
						height:30rpx;
						font-size:24rpx;
						background:#333;
						border-radius: 4rpx;
						position:absolute;
						top:80rpx;
						color:#fff;
						left:6rpx;
					}
					
					
				}
				
			}
		}
	}
}
.box-list{
	.box-list-item{
		width:718rpx;
		height:234rpx;
		margin:16rpx auto 0rpx;
		background:#fff;
		display:flex;
		.product-img{
			width:204rpx;
			height:204rpx;
			margin-top:16rpx;
			margin-left:22rpx;
		}
		.product-desc{
			width:440rpx;
			text-align:left;
			.product-title{
				margin-top:28rpx;
				margin-left:18rpx;
				font-size:28rpx;
				text-overflow: ellipsis;
				overflow: hidden; 
				height:40rpx;
			}
			.product-price-item{
				width:100%;
				display:flex;
				margin-top:40rpx;
				.product-price-sologn{
					width:126rpx;
					height:54rpx;
					background:#D84C29;
					color:#fff;
					font-size:28rpx;
					line-height:54rpx;
					text-align:center;
					margin-left:178rpx;
				}
				.product-price{
					height:54rpx;
					line-height:54rpx;
					font-size:30rpx;
					margin-left:20rpx;
					color:#000;
				}
			}
			.product-rate-desc{
				width:100%;
				display:flex;
				margin-top:26rpx;
				.product-rate-cycle{
					width:16rpx;
					height:16rpx;
					background:#000;
					border-radius: 50%;
					margin-left:4rpx;
					margin-top:12rpx;
				}
				.product-rate-line{
					width:220rpx;
					height:2rpx;
					background:#000;
					margin-top:18rpx;
				}
				.product-rate-item{
					width:180rpx;
					height:34rpx;
					border:2rpx solid #333;
					font-size:24rpx;
					line-height:34rpx;
					text-align: center;
					
				}
			}
		}
		
		.product-desc-right{
			width:52rpx;
			height:234rpx;
			position:relative;
			.right-image{
				width:52rpx;
				height:234rpx;
				
			}
			.level-name{
				color:#fff;
				font-size:28rpx;
				position:absolute;
				top:62rpx;
				 left: 0;
			}
			.right-icon{
				width:18rpx;
				height:30rpx;
				position:absolute;
				top:150rpx;
				left:18rpx
				
			}
		}
		
	}
}
.submit{
	
	width:546rpx;
	height:72rpx;
	background-color: #D84C29;
	color:#fff;
	margin:206rpx auto 0rpx;
	text-align: center;
	line-height:72rpx;
	font-size: 28rpx;
}

.buy-content{
	width:100%;
	padding-bottom:20rpx;
	background:#fff;;
	display:flex;
	.content{
		.buy-top{
			font-size:32rpx;
			color:#333;
			margin-top:20rpx;
			margin-left:26rpx;
			font-weight:600;
			>text:nth-child(2){
				color:#D84C29
			}
			.rightmore {
				position:absolute;
				top:24rpx;
				right:28rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}
		.buy-box-desc{
			height:192rpx;
			margin-top:18rpx;
			display:flex;
			border-top:2rpx solid #f2f2f2;
			border-bottom:2rpx solid #f2f2f2;
			.buy-box-img{
				width:160rpx;
				height:160rpx;
				margin-top:16rpx;
				margin-left:52rpx;
				
			}
			.buy-box-item{
				width:518rpx;
				margin-left:20rpx;
				font-size:26rpx;
				font-weight:600;
				.buy-box-title{
					margin-top:26rpx;
					height:56rpx;
				}
				.buy-box-price{
					margin-top:26rpx;
				}
			}
		}
		.buy-coupon{
			padding-left:14rpx;
		}
		.buy-xz{
			
			margin-top:24rpx;
			border-top:2rpx solid #f2f2f2;
			padding-top:14rpx;
			padding-bottom:14rpx;
			border-top:2rpx solid #f2f2f2;
			border-bottom:2rpx solid #f2f2f2;
			padding-left:38rpx;
			color:#333;
			font-size:24rpx;
			overflow:hidden;
			.buy-xz-title{
				float:left;
				>text{
					color:#D84C29;
				}
			}
			.buy-xz-image{
				margin-top:6rpx;
				margin-right:40rpx;
				float:right;
				width:26rpx;
				height:26rpx;
			}
		
		}
		.buy-submit{
			overflow: hidden;
			.total{
				margin-top:58rpx;
				font-size:30rpx;
				font-weight:600;
				margin-left:40rpx;
				float:left;
			}
			
			.button{
				width:200rpx;
				height:58rpx;
				color:#fff;
				border-raidus:4rpx;
				border:1rpx solid #D84C29;
				line-height:58rpx;
				background:#D84C29;
				font-size:32rpx;
				float:right;
				margin-right:40rpx;
				margin-top:44rpx;
				text-align: center;
			}
		}
		.buy_patment{
			border:2rpx solid #f2f2f2;
		}
		
	}
	
}
 .boxRecord{
 	position:absolute;
 	right:20rpx;
 	top:32rpx;
 	display:flex;
	font-size:24rpx;
	z-index:10;
 	.rightmore{
 		width:10rpx;
 		height:16rpx;
		margin-top:8rpx;
		margin-left:10rpx;
 		
 	}
 }	
</style>